import 'package:flutter/material.dart';
import 'package:flutter_grammar/pages/searchPage.dart';

/* 
Flutter中的路由通俗的讲就是页面跳转。在Flutter中通过Navigator组件管理路由导航。
并提供了管理堆栈的方法。如：Navigator.push和Navigator.pop
Flutter中给我们提供了两种配置路由跳转的方式：
1、基本路由 
 - Navigator.push() 方法进行路由跳转,也可以传参数  
   - 接收参数的方法：const SearchPage({super.key,  this.title = "search"});  可以给默认值 也可以给title设置required
   - 访问参数 widget.title   通过widget访问参数
 - Navigator.pop() 方法返回上一级
2、命名路由


*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件  //去掉debug图标
      MaterialApp(debugShowCheckedModeBanner: false, home: Tabs()));
}

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

// 混入SingleTickerProviderStateMixin
class _TabsState extends State<Tabs> {
  // 定义主动触发drawer的key值
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  int _currentIndex = 0;
  // 引入需要的tab

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 绑定key值
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('FloatingActionButton'),
        backgroundColor: Colors.cyanAccent,
        leading: IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () {
              print('menu Pressed');
              // 在需要触发drawer的地方打开侧边栏
              _scaffoldKey.currentState?.openDrawer();
            }),
        actions: <Widget>[
          IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('Search Pressed');
              }),
          IconButton(
              icon: const Icon(Icons.more_horiz),
              onPressed: () {
                print('more_horiz Pressed');
              })
        ],
      ),
      body: Center(
        child: ElevatedButton(
            onPressed: () {
              // 跳转路由  基本都是固定写法  return到需要跳转的页面即可
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                // return SearchPage(); // 不传值
                return SearchPage(title: 'route Params',);
              }));
            },
            child: Text('click me')),
      ),
      bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          ],
          currentIndex: _currentIndex,
          onTap: (val) {
            setState(() {
              _currentIndex = val;
            });
          },
          fixedColor: Colors.blueAccent),
      floatingActionButton: (Container(
        height: 48,
        width: 48,
        padding: EdgeInsets.all(0),
        margin: EdgeInsets.only(top: 10),
        decoration: BoxDecoration(
            color: _currentIndex == 1 ? Colors.red : Colors.blueAccent,
            borderRadius: BorderRadius.circular(30)),
        child: FloatingActionButton(
          backgroundColor: _currentIndex == 1 ? Colors.red : Colors.blueAccent,
          onPressed: () {
            setState(() {
              _currentIndex = 1;
            });
          },
          child: Icon(Icons.add),
        ),
      )),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      // 配置 侧边抽屉
      drawer: DrawerPage(),
      endDrawer: Drawer(
        child: Text('右侧侧边栏'),
      ),
    );
  }
}

class DrawerPage extends StatelessWidget {
  const DrawerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: Column(
      children: <Widget>[
        UserAccountsDrawerHeader(
          accountName: const Text("大地老师"),
          accountEmail: const Text("dadi@itying.com"),
          currentAccountPicture: const CircleAvatar(
            backgroundImage:
                NetworkImage("https://www.itying.com/images/flutter/3.png"),
          ),
          decoration: const BoxDecoration(
              color: Colors.yellow,
              image: DecorationImage(
                  image: NetworkImage(
                      "https://www.itying.com/images/flutter/2.png"),
                  fit: BoxFit.cover)),
          otherAccountsPictures: <Widget>[
            Image.network("https://www.itying.com/images/flutter/4.png"),
            Image.network("https://www.itying.com/images/flutter/5.png"),
            Image.network("https://www.itying.com/images/flutter/6.png")
          ],
        ),
        const ListTile(
          title: Text("个人中心"),
          leading: CircleAvatar(child: Icon(Icons.people)),
        ),
        const Divider(),
        const ListTile(
          title: Text("系统设置"),
          leading: CircleAvatar(child: Icon(Icons.settings)),
        )
      ],
    ));
  }
}
